<template>
    <div>
        <div class="financialHeadlines">
        <div class="toutiao">
              <el-row :gutter="20">
                <el-col :span="4"><div class="grid-content">
                      <div class="toutiao-tab">
                        <a :href="item.url" v-for="item in siMuGuQuan" :key="item.message">{{item.message}}</a>    
                      </div>
                  </div></el-col>
                <el-col :span="20 "><div class="grid-content">
                    <div class="project">
                            <img :src="siMuGuQuanImgUrl" alt="">
                    </div>
                </div></el-col>
              </el-row>
        </div>
    </div>

    <!-- <div class="guanggao">
        <img src="../../static/index/20180118150429.png" alt="">
    </div> -->
    </div>
</template>
<script>
export default {
    props:{
        siMuGuQuan:{
            type:Array,
            default: function () {
                return [
                    {message:"私募股权",url:"/"},
                    {message:"股权研究",url:"/"}
                ]
            }
        },
        siMuGuQuanImgUrl:{
            type:String,
            default:"http://p6dwecco6.bkt.clouddn.com/img/2.jpg"
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.project {
  width: 100%;
  height: 400px;
  margin-top: 20px;
}
.tabimg {
  width: 100%;
}
.guanggao {
  max-width: 1400px;
  text-align: center;
  margin: 10px auto;
}
.guanggao img {
  width: 100%;
  height: 150px;
}
.toutiao-tab {
  height: 400px;
  position: relative;
  margin-top: 20px;
  overflow: hidden;
  background-color: #c79337;
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(top, #c79337, #cd9c54);
  background-image: -webkit-linear-gradient(top, #c79337, #cd9c54);
  background-image: -o-linear-gradient(top, #c79337, #cd9c54);
  background-image: linear-gradient(to bottom, #c79337, #cd9c54);
}
.toutiao-tab a {
  display: block;
  color: white;
  font-size: 20px;
  font-weight: bolder;
  text-align: center;
  margin-top: 30px;
}
.toutiao-tab a:first-child {
  margin-top: 160px;
}
.toutiao {
  padding: 15px;
  overflow: hidden;
}
.financialHeadlines {
  min-width: 1000px;
  width: 86%;
    max-width: 1400px;
  margin: 30px auto 0;
  background: #fff;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

</style>
